<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core">


    <ui:composition template="../templateRecepcion/template.xhtml">
        <ui:define name="content">
            <h:form id="formularioIngresoClienteID" styleClass="form" >
                <p:remoteCommand  name="iniciarDatos"
                                  process="@this"
                                  update="formularioIngresoClienteID"
                                  actionListener="#{ingresoClienteControlador.iniciarDatos()}" />
                <p:growl id="messages" autoUpdate="true" />
                <p:panel id="panelIngresoDatosClienteID"
                         styleClass="panel">
                    <p:panel id="panelDatosClienteID" 
                             styleClass="panel" header="Informacion Basica  - Cliente">
                        <h:panelGrid columns="3" styleClass="panelGridAnchoTotal" >
                            <h:panelGrid columns="2" styleClass="panelGridCuarentaPorCiento">
                               
                                <h:outputLabel value="Documento:" styleClass="outPutLabel"/>
                                <p:selectOneMenu id="cmTipoDocumentoID" value="#{ingresoClienteDataManager.cliente.tipoDocumento}" 
                                                 styleClass="selectOneMenu" 
                                                 required="true" requiredMessage="Documento Obligatorio">  
                                    <f:selectItems value="#{ingresoClienteControlador.tipoDocumentos}" />
                                    <f:converter converterId="tipoDocumentoConvertidor"/>
                                </p:selectOneMenu>  
                                
                                <h:outputLabel value="#Documento:" styleClass="outPutLabel"/>
                                <p:inputText value="#{ingresoClienteDataManager.cliente.cedula}" 
                                             styleClass="inputText"
                                             required="true" requiredMessage="Documento Obligatorio">
                                </p:inputText>

                                <h:outputLabel value="Nombre:" styleClass="outPutLabel"/>
                                <p:inputText value="#{ingresoClienteDataManager.cliente.nombre}" 
                                             styleClass="inputText" 
                                             required="true" requiredMessage="Nombre Obligatorio"
                                             onkeyup="javascript:this.value=this.value.toUpperCase();"/>

                            </h:panelGrid>
                            <h:panelGrid columns="2" styleClass="panelGridCuarentaPorCiento">
                                <h:outputLabel value="Apellido Paterno:" styleClass="outPutLabel"/>
                                <p:inputText value="#{ingresoClienteDataManager.cliente.apellidoPaterno}" 
                                             styleClass="inputText"
                                             required="true" requiredMessage="Apellido Paterno Obligatorio"
                                             onkeyup="javascript:this.value=this.value.toUpperCase();"/>

                                <h:outputLabel value="Apellido Materno: " styleClass="outPutLabel"/>
                                <p:inputText value="#{ingresoClienteDataManager.cliente.apellidoMaterno}" 
                                             styleClass="inputText"
                                             required="true" requiredMessage="Apellido Materno Obligatorio"
                                             onkeyup="javascript:this.value=this.value.toUpperCase();"/>

                                <h:outputLabel value="Email: " styleClass="outPutLabel"/>
                                <p:inputText value="#{ingresoClienteDataManager.cliente.correoElectronico}" 
                                             styleClass="inputText"
                                             required="true" requiredMessage="Email Obligatorio">
                                    <f:validator binding="#{mailValidator}"/>
                                </p:inputText>

                            </h:panelGrid>

                            <h:panelGrid columns="1" styleClass="panelGridCuarentaPorCiento">


                                <h:outputLabel value="Fecha Nacimiento: " styleClass="outPutLabel"/>
                                <p:calendar value="#{ingresoClienteDataManager.cliente.fechaNacimiento}"
                                            styleClass="calendar" required="true"
                                            requiredMessage="Fecha Nacimiento Obligatoria" pattern="dd/mm/yyyy"/>

                                <h:outputLabel value="Sexo: " styleClass="outPutLabel"/>
                                <p:selectOneMenu value="#{ingresoClienteDataManager.cliente.sexoPersona}" 
                                                 styleClass="selectOneMenu" 
                                                 required="true" requiredMessage="Sexo Obligatorio">  
                                    <f:selectItems value="#{ingresoClienteControlador.sexoPersona}" />
                                    <f:converter converterId="sexoPersonaConvertidor"/>
                                </p:selectOneMenu> 

                            </h:panelGrid>
                        </h:panelGrid>

                    </p:panel> 
                    <p:separator styleClass="separator"/>
                    <p:panel id="panelDatosGeneralesClienteID" 
                             styleClass="panel" header="Datos Generales - Cliente">
                        <h:panelGrid columns="3" styleClass="panelGridAnchoTotal" >
                            <h:panelGrid columns="2" styleClass="panelGridCuarentaPorCiento">
                                <h:outputLabel value="Formas de Pago:" styleClass="outPutLabel"/>
                                <p:selectOneMenu value="#{ingresoClienteDataManager.cliente.formasDePago}" 
                                                 styleClass="selectOneMenu" 
                                                 required="true" requiredMessage="Forma de Pago Obligatorio">  
                                    <f:selectItems value="#{ingresoClienteControlador.formasDePago}" />
                                    <f:converter converterId="formaPagoConvertidor"/>
                                </p:selectOneMenu> 


                            </h:panelGrid>

                            <h:panelGrid columns="2" styleClass="panelGridCuarentaPorCientopanelGridCuarentaPorCiento" >

                                <h:outputLabel value="Nacionalidad:" styleClass="outPutLabel"/>
                                <p:selectOneMenu value="#{ingresoClienteDataManager.cliente.nacionalidad}" 
                                                 styleClass="selectOneMenu"
                                                 required="true" requiredMessage="Nacionalidad Obligatorio">  
                                    <f:selectItems value="#{ingresoClienteControlador.nacionalidad}" />
                                    <f:converter converterId="nacionalidadConvertidor"/>
                                </p:selectOneMenu> 

                            </h:panelGrid>

                            <h:panelGrid columns="2" styleClass="panelGridCuanrentaPorCiento" >
                                <h:outputLabel value="Estado Civil:" styleClass="outPutLabel"/>
                                <p:selectOneMenu value="#{ingresoClienteDataManager.cliente.estadoCivil}" 
                                                 styleClass="selectOneMenu"
                                                 required="true" requiredMessage="Estado Civil Obligatorio">  
                                    <f:selectItems value="#{ingresoClienteControlador.estadoCivil}" />
                                    <f:converter converterId="estadoCivilConvertidor"/>
                                </p:selectOneMenu>
                            </h:panelGrid>
                        </h:panelGrid>
                    </p:panel>
                    <p:separator styleClass="separator"/>
                    <p:panel id="panelDivisionGeograficaClienteID" 
                             styleClass="panel" header="Division Geografica - Cliente">
                        <h:panelGrid columns="2" styleClass="panelGridAnchoTotal" >
                            <h:outputLabel value="Provincia:" styleClass="outPutLabel"/>
                            <p:selectOneMenu value="#{ingresoClienteDataManager.divisionGeograficaNivelUno}" 
                                             styleClass="selectOneMenu">  
                                <f:selectItems value="#{ingresoClienteControlador.divisionGeograficaNivelUno}" />
                                <f:converter converterId="divisionGeograficaConvertidor"/>
                                <p:ajax event="change" 
                                        update="listaDivGeograficaNivelDosID listaDivGeograficaNivelTresID" 
                                        listener="#{ingresoClienteControlador.seleccionarDivisionNivelUno}"/>
                            </p:selectOneMenu>

                            <h:outputLabel value="Canton:" styleClass="outPutLabel"/>
                            <p:selectOneMenu id="listaDivGeograficaNivelDosID" value="#{ingresoClienteDataManager.divisionGeograficaNivelDos}" 
                                             styleClass="selectOneMenu">  
                                <f:selectItems value="#{ingresoClienteControlador.divisionGeograficaNivelDos}" />
                                <f:converter converterId="divisionGeograficaConvertidor"/>
                                <p:ajax event="change" update="listaDivGeograficaNivelTresID"/>
                            </p:selectOneMenu>

                            <h:outputLabel value="Parroquia:" styleClass="outPutLabel"/>
                            <p:selectOneMenu id="listaDivGeograficaNivelTresID" value="#{ingresoClienteDataManager.divisionGeograficaNivelTres}" 
                                             styleClass="selectOneMenu">  
                                <f:selectItems value="#{ingresoClienteControlador.divisionGeograficaNivelTres}" />
                                <f:converter converterId="divisionGeograficaConvertidor"/>
                                <p:ajax event="change" listener="#{ingresoClienteControlador.seleccionarDivisionNivelTres}"/>
                            </p:selectOneMenu>


                        </h:panelGrid>
                    </p:panel>
                    <p:separator styleClass="separator"/>
                    <p:panel id="panelDireccionClienteID" 
                             styleClass="panel" header="Direccion - Cliente">
                        <h:panelGrid columns="2" styleClass="panelGridAnchoTotal" >
                            <h:panelGrid columns="2" styleClass="panelGridCuarentaPorCiento">
                                <h:outputLabel value="Calle Principal:" styleClass="outPutLabel"/>
                                <p:inputText value="#{ingresoClienteDataManager.direccionCliente.callePrincipal}" 
                                             styleClass="inputText"
                                             required="true" requiredMessage="Calle Principal Obligatoria"
                                             onkeyup="javascript:this.value=this.value.toUpperCase();"/>

                                <h:outputLabel value="Calle Secundaria:" styleClass="outPutLabel"/>
                                <p:inputText value="#{ingresoClienteDataManager.direccionCliente.calleSecundaria}" 
                                             styleClass="inputText"
                                             required="true" requiredMessage="Calle Secundaria Obligatoria"
                                             onkeyup="javascript:this.value=this.value.toUpperCase();"/>

                                <h:outputLabel value="Numero:" styleClass="outPutLabel"/>
                                <p:inputText value="#{ingresoClienteDataManager.direccionCliente.numero}" 
                                             styleClass="inputText"
                                             required="true" requiredMessage="Numero Obligatorio"
                                             onkeyup="javascript:this.value=this.value.toUpperCase();"/>

                            </h:panelGrid>

                            <h:panelGrid columns="2" styleClass="panelGridCuarentaPorCiento">
                                <h:outputLabel value="Telefono Fijo:" styleClass="outPutLabel"/>
                                <p:inputText value="#{ingresoClienteDataManager.direccionCliente.telefonoFijo}" 
                                             styleClass="inputText"/>

                                <h:outputLabel value="Telefono Celular:" styleClass="outPutLabel"/>
                                <p:inputText value="#{ingresoClienteDataManager.direccionCliente.telefonoCelular}" 
                                             styleClass="inputText"/>

                            </h:panelGrid>

                        </h:panelGrid>
                    </p:panel>
                    <p:separator styleClass="separator"/>
                    <p:panel id="panelBotonCrearClienteID" 
                             styleClass="panel" >
                        <h:panelGrid columns="2" styleClass="panelGridAnchoTotal" >
                            <p:commandButton id="botonCrearClienteID" action="#{ingresoClienteControlador.crearCliente()}" value="Crear Cliente" 
                                             styleClass="comandButton"
                                             update=":formularioIngresoClienteID :formularioIngresoClienteID:messages"
                                             onclick="mostrarEspera();" 
                                             oncomplete="ocultarEspera();window.scrollTo(0, 0);"
                                             icon="ui-icon-disk" />
                            <p:commandButton id="botonCancelarClienteID" action="#{ingresoClienteDataManager.limpiarValores()}" value="Nuevo ingreso" 
                                             styleClass="comandButton"
                                             update=":formularioIngresoClienteID:panelDatosClienteID :formularioIngresoClienteID:" process="@this"
                                             oncomplete="window.scrollTo(0, 0);"
                                             icon="ui-icon-close"/>
                        </h:panelGrid>
                    </p:panel>
                </p:panel>
            </h:form> 
        </ui:define>
    </ui:composition>

</html>